<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家添加民宿</title>
</head>
<body>

<script src="../js/Vue/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/Axios/axios-0.18.0.js"></script>

<div id="app">



    <el-form ref="form" :model="wares" label-width="150px">
        <el-form-item label="民宿名称：">
            <el-input v-model="wares.waresName"></el-input>
        </el-form-item>
        <el-form-item label="民宿价格：">
            <el-input v-model="wares.price"></el-input>
        </el-form-item>
        <el-form-item label="售卖数量（间/天）：">
            <el-input v-model="wares.number"></el-input>
        </el-form-item>
            <el-form-item label="地址信息：">
                <el-input v-model="wares.address"></el-input>
            </el-form-item>
        <el-form-item label="描述信息：">
            <el-input type="textarea" v-model="wares.description"></el-input>
        </el-form-item>

        <el-form-item label="规格(人/间)：">
            <el-select v-model="wares.norms" placeholder="规格(人/间)">
                <el-option label="1 人/间" value="1"></el-option>
                <el-option label="2 人/间" value="2"></el-option>
                <el-option label="3 人/间" value="3"></el-option>
                <el-option label="4 人/间" value="4"></el-option>
                <el-option label="5 人/间" value="5"></el-option>
                <el-option label="6 人/间" value="6"></el-option>
            </el-select>

            <el-button type="success" @click="getUrl">获取坐标</el-button>
            <a type="success" v-bind:href="addressUrl" v-if="addressUrl != ''" target="_blank">点击可查看地图</a>


            <el-upload
                    action="/common/upload"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    limit="1"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>



        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>






</div>




<script>
    new Vue({

        el: "#app",

        data() {
            return {

                addressUrl : '',

                // 这是商品的数据
                waresList: [{

                    id: '158582283090817021',                    /* 商品的 id */
                    waresName: '辣子鸡',             /* 商品的名称 */
                    price: '502',                 /* 商品的价格 */
                    number: '2',                /* 当天民宿的最大数量 */
                    norms: '1',                 /* 商品的套间规格 */
                    image: '/common/download?name=02c88b5d-8c36-4afd-99b0-a6e59320c371.jpg',                 /* 图片 */
                    addressX: '111.154481',               /* 经纬度地址的经度信息 */
                    addressY: '21.782305',               /* 经纬度地址的纬度信息 */
                    address: '广东省茂名市电白区霞洞镇永乐小学',               /* 经纬度地址的纬度信息 */
                    description: '民宿短租，快来租我吧',           /* 描述信息 */
                    status: '1',                /* 状态0 停售 1 起售 2 申请中 3 禁用 */
                    createTime: '2021-05-06 17:20:07',            /* 创建时间 */
                    updateTime: '2021-05-06 17:20:07',            /* 更新时间 */
                    createPhone: '13112345678',           /* 创建人,创建的商家的电话 */
                    updateId: '1'               /* 修改人 */

                }],

                // 这是商品的数据
                wares: {

                    id: '',                    /* 商品的 id */
                    waresName: '辣子鸡',             /* 商品的名称 */
                    price: '502',                 /* 商品的价格 */
                    number: '2',                /* 当天民宿的最大数量 */
                    norms: '1',                 /* 商品的套间规格 */
                    // image: '/common/download?name=02c88b5d-8c36-4afd-99b0-a6e59320c371.jpg',                 /* 图片 */
                    image: '',                 /* 图片 */
                    addressX: '',               /* 经纬度地址的经度信息 */
                    addressY: '',               /* 经纬度地址的纬度信息 */
                    address: '广东省茂名市电白区霞洞镇永乐小学',               /* 经纬度地址的纬度信息 */
                    description: '民宿短租，快来租我吧',           /* 描述信息 */
                    status: '1',                /* 状态0 停售 1 起售 2 申请中 3 禁用 */
                    createTime: '',            /* 创建时间 */
                    updateTime: '',            /* 更新时间 */
                    createPhone: '',           /* 创建人,创建的商家的电话 */
                    updateId: ''               /* 修改人 */

                },

                formInline: {
                    waresName: '辣',
                    status: '4'
                },

                // url:"/common/download?name=02c88b5d-8c36-4afd-99b0-a6e59320c371.jpg",
                // url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                dialogImageUrl: 'https://imgoss.ilive.cn/image/202302/12/1676160909901_365x204.png.jpg',
                dialogVisible: false,




                /*wares: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
*/
            }
        },

        methods: {


            /* 提交按钮的事件 */
            async onSubmit() {

                if (this.addressX == '' || this.addressY == ''){
                    alert("未获取地址坐标")
                    return
                }

                if (this.wares.waresName == ''){
                    alert("商品名称不能为空")
                    return
                }

                if (this.wares.description == ''){
                    alert("描述信息不能为空")
                    return
                }

                if (this.wares.address == ''){
                    alert("地址不能为空")
                    return
                }
                if (this.wares.addressX == ''){
                    alert("地址的经度不能为空,请获取经度")
                    return
                }
                if (this.wares.addressY == ''){
                    alert("地址的纬度度不能为空,请获取纬度")
                    return
                }
                if (this.wares.image == ''){
                    alert("上传的图片不能为空")
                    return
                }

                if (isNaN(this.wares.price) &&  this.wares.price == ''){
                    alert("价格请输入数字，且不能为空")
                    return
                }

                if (isNaN(this.wares.number) &&  this.wares.number == ''){
                    alert("售卖数量（间/天）请输入数字，且不能为空")
                    return
                }

                let _this = this;
                axios({
                    method:"post",
                    url:"/business/saveWares",
                    data: _this.wares
                }).then(function (resp) {
                    if(resp.data.code == 1){

                        alert("申请成功，等待工作人员通过就可以使用了")
                    } else {
                        _this.handleRemove();
                        alert(resp.data.msg)
                    }



                });

            },

            // 输入地址获取经纬度坐标
            async getUrl(){

                if (!this.wares.address) {
                    alert("该地址获取不出来，请重新输入地址");
                    return;
                };

                let _this = this;

                await axios({
                    method:"get",
                    url:"https://restapi.amap.com/v3/geocode/geo?address="
                        + this.wares.address + "&output=JSON&key=93b332a46a820fb32ad2fe70976743f5"
                }).then(function (resp) {

                    let result = JSON.stringify(resp.data);
                    let location = JSON.parse(result);

                    alert("得到的经纬度为:  " + location.geocodes[0].location);

                    if(! location.geocodes[0].location){
                        alert("该地址获取不出来，请重新输入地址");
                        return;
                    }
                    let split = location.geocodes[0].location.split(",");
                    _this.wares.addressX = split[0];
                    _this.wares.addressY = split[1];



                    // alert(_this.wares.addressX)
                    // alert(_this.wares.addressY)
                    _this.addressUrl = 'https://m.amap.com/navi/?dest='+ location.geocodes[0].location +'&destName='+ _this.wares.address +'&hideRouteIcon=1&key=93b332a46a820fb32ad2fe70976743f5'

                });


            },


            async handleRemove(file, fileList) {
                console.log(file, fileList);

                let _this = this;
                await axios({
                    method:"get",
                    url:"/common/remove?name=" +  _this.wares.image
                }).then(function (resp) {

                    if (resp.data.code == 1){

                        alert("该图片在服务端删除成功");
                    } else {
                        alert("该图片在服务端删除失败");
                    }


                })

                alert("删除提交图片")
            },


            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSuccess(response, file, fileList) {
                alert(" response 的数据:   " + JSON.stringify(response));
                alert(" file 的数据:   " + JSON.stringify(file));
                alert(" fileList 的数据:   " + JSON.stringify(fileList));

                if (response.code == 1){
                    alert("提交图片成功")
                    this.wares.image = response.data;
                } else {
                    alert("上传图片失败")
                }



                /*                this.dialogImageUrl = file.url;
                                this.wares.image = file.url.substr(file.url.lastIndexOf("/") + 1);
                                alert("this.wares.image 的数据是:  " + this.wares.image);
                                this.dialogVisible = true;*/
            }






        },





    })


</script>



</body>
</html>